✍Udemy/Ts/React-Extra-1: Zod

본 PR은 청강 1회독을 마친 후 N회독으로 작성된 PR입니다.
Extra는 개인적으로 공부하고 싶었고 실험하고 싶었던 부분을 학습하는 공간으로 제작된 브렌치 입니다.

🔗Reference

• GPT, Zod 사용방법
• Zod와 React-Hook-Form 사용방법
• Ts와 React Type 설정과 사용방법

🔥KeyWord

• Zod
• Type
• infer
• parse

📝Description

• Zod
  • Zod는 데이터 구조를 정의하고 런타임에서 유효성을 검증하기 위한 스키마 기반의 라이브러리이다. Zod 스키마는 JavaScript와 TypeScript 환경 모두에서 데이터 검증 및 타입 추론을 제공한다.
  • infer
    • infer는 Zod 스키마로부터 TypeScript 타입을 추출하여 코드의 타입 안전성을 보장하는 데 사용된다. z.infer 형태로 사용하여 스키마 기반 타입을 가져온다.
  • parse
    • parse는 Zod에서 제공하는 메서드로 입력값이 스키마에 맞는지 검증한다. 유효한 경우 데이터가 반환되고 그렇지 않으면 예외를 발생시킨다. 이를 통해 런타임 데이터 유효성을 검사하여 예상치 못한 데이터 구조로 인한 오류를 방지한다.
• 1. zod로 props 스키마 정의
• 🚩: Zod를 사용해 컴포넌트 적용 방법 주석으로 추가
  • buttonPropsSchema는 Zod의 object 메서드를 사용하여 props의 데이터 구조를 정의하고 있다. EnterColor와 LeaveColor가 모두 문자열(string) 타입이어야 함을 명시하며 props가 올바른 타입인지 유효성 검사를 수행하고 런타임에서 props를 검증하는 기준을 제공한다.
• 2. TypeScript 타입으로 추출
• 🚩: Zod를 사용해 컴포넌트 적용 방법 주석으로 추가
  • z.infer<typeof buttonPropsSchema>를 사용하여 buttonPropsSchema로부터 TypeScript 타입을 추출한다. Zod 스키마를 TypeScript 타입으로 변환하여 컴포넌트에 타입을 명시할 수 있도록 한다. props의 타입을 명확히 정의하여 ButtonComponents 컴포넌트가 받는 props의 타입을 TypeScript가 type 추론을 할 수 있도록 도와준다.
  • 2-1. 바로 타입만 추출하고 스키마 제거
    • 위와 같이 스키마를 임시로 정의하여 타입만 추출하고 이후 스키마 정의 자체는 제거할 수 있다. 이 방법은 스키마를 타입 정의 용도로만 사용할 때 유용하다.
• 3. 컴포넌트에 타입 설정: FC Generics로 적용하지 않고 해당 Props에 Type을 적용
  • 추출된 타입 ButtonProps를 ButtonComponents 컴포넌트의 props 타입으로 설정한다. ButtonProps 타입을 사용함으로 컴포넌트가 받는 props의 구조가 EnterColor와 LeaveColor를 포함한 올바른 구조임을 보장하게 된다.
• 4. Error: 런타임 Props 검증, Parse 미사용으로 Error 발생
• 🐛: 런타임 Props 검증, Parse 적용으로 Error 해결
  • 러타임 Props를 검증하는 로직이 작성되 않아서 발생하는 Error이다. 따라서 컴포넌트 내부에서 props로 전달된 값을 구조 분해 할당하여 EnterColor와 LeaveColor를 추출한다. 이후 props에 있는 EnterColor와 LeaveColor를 스타일 및 로직에 사용할 수 있게 된다.

📌Summary

• 평소에 사용한 React Prop-types대신 Ts와 잘 융합되는 Zod를 사용함으로써 보다 가독성이 좋다는 것을 느꼈다. 사용하는 방법만 잘 익혀두면 어려움 없이 사용할 수 있다.